import React from 'react';
import { Tabs, Select, Button, Icon,message,Spin } from 'antd';
import styles from './VortexTabs.less';
const TabPane = Tabs.TabPane;
const Option = Select.Option;

class VortexTabs extends React.Component{
    constructor(props){
        super(props); 
        let t = this;
        this.state = {
        };
    }
    loopSpecData(){
        if(!!data){
            return data.map((item,index)=>{
              return(
                <li className={item.checked?style.realAndHisBox+' selected':style.realAndHisBox} key={index} onClick={()=>searchInfo(item,index,type)}>
                  <Tooltip title={item.name}  placement="left">
                    <span>
                        {item.name}
                    </span>
                  </Tooltip>
                </li>
              )
            })
        }
  }
    render(){
        let t = this;
        let props = this.props;
        let config = {
            data:props.data||[],
            type:props.type||'line',
            size:props.size||'default',
            tabPosition:props.tabPosition||'top',
            tabBarStyle:{...props.style},
            disabledIndex:props.disabledIndex,
            hideAdd:props.hideAdd,
            loading:props.loading||false,
            onChange(key){
                //tab切换
                if(typeof(props.onChange) =='function'){
                    if('loading' in props)
                    {
                        props.onChange(key,true); 
                    }else{
                        props.onChange(key);
                    } 
                }
            },
            onTabClick(key){
                //tab 被点击的回调
                if(typeof(props.onTabClick) =='function'){
                    props.onTabClick(key);
                }
            },
            onPrevClick(key){
                //prev 按钮被点击的回调
                if(typeof(props.onPrevClick) =='function'){
                    props.onPrevClick(key);
                }
            },  
            onNextClick(key){
                //next 按钮被点击的回调
                if(typeof(props.onNextClick) =='function'){
                    props.onNextClick(key);
                }
            },
            onEdit(targetKey, action){
                //新增或删除
                config[action](targetKey);
            },
            add(){
                //next 按钮被点击的回调
                if(typeof(props.onAdd) =='function'){
                    props.onAdd();
                }
            },
            remove(targetKey){ 
                //next 按钮被点击的回调
                if(typeof(props.onRemove) =='function'){
                    let activeKey = props.activeKey;
                    let lastIndex;
                    props.data.forEach((pane, i) => {
                        if (pane.key === targetKey) {
                            lastIndex = i - 1;
                        }
                    });
                    const panes = props.data.filter(pane => pane.key !== targetKey);
                    if (panes.length>0) {
                        if(lastIndex >= 0)
                        {
                            activeKey = panes[lastIndex].key;
                        }else{
                            activeKey = panes[0].key;
                        }
                    }
                    props.onRemove(panes, activeKey);
                }
            }
        }
        //有则取用户自定义，用户未定义该属性则取默认值
        if('activeKey' in props )
            config.activeKey=props.activeKey;
        if('defaultActiveKey' in props )
            config.defaultActiveKey=props.defaultActiveKey;
        if('tabBarExtraContent' in props )
            config.tabBarExtraContent=props.tabBarExtraContent;
        return (
            <div className={config.type=='card-wrap'?styles.cardContainer:''}>
                <Tabs {...config}>
                    {
                        config.data.map(pane => 
                            <TabPane tab={
                                (
                                    'icon' in pane?
                                    <span>
                                        <Icon type={pane.icon||'tags'} />{pane.title}
                                    </span>
                                    :
                                    pane.title
                                )
                            } 
                            key={pane.key} 
                            disabled={config.disabledIndex==pane.key}
                            closable={pane.closable}
                            >
                                <Spin key={pane.key} spinning={config.loading}>
                                    {
                                        (typeof(pane.content) === 'function')?
                                        pane.content():pane.content
                                    }
                                </Spin>
                            </TabPane>
                        )
                    }
                </Tabs>
            </div>
        )
    }
}

export default VortexTabs;